<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            cursor: grabing;
        }
    </style>
</head>

<body>
    <input id="search" value="" type="text">
</body>

<script src='../../js/common.js'></script>

<script>

    // 一. 通过防抖监听input框输入
    let search = document.getElementById("search")//获取inputDom
    // 需要防抖处理的函数
    const treeSearch = function () {
        // 逻辑处理
        console.log("通过绑定inputThis得到的value:", this.value);//通过绑定this可以更加方便的使用当前监听的input的属性
        let searchValue = document.getElementById("search").value//不重新绑定this就得重新通过获取监听dom的方式拿到需要的属性
        // console.log(searchValue);//不重新绑定this获取监听dom的方式拿到需要的属性方式
    }
    //oninput监听input框的输入事件
    search.oninput = debounce(treeSearch, 2000, true)

    function debounce (func, wait = 1000, immediate = false) {
        // 定义一个变量来记录上一次的定时器函数的状态
        let timer = null
        let isImmediate = false//通过改变量控制函数是否立即执行
        //返回一个函数
        return function () {
            let _this = this//获取input的this
            let args = arguments  //接收函数参数
            // 返回的变量,让函数只执行最后一次
            if (timer) {
                clearInterval(timer)   //删除上一次定时器
            }
            if (immediate && !isImmediate) {//第一次是否需要立即执行 当immediate和isImmediate 都为一个值时回立即执行
                func.apply(_this, args)
                isImmediate = true//使函数下次不会立即执行使其延迟
            } else {
                timer = setTimeout(function () {//将定时器声明为变量timer
                    func.apply(_this, args)//如果处理函数需要用到input的this就通过这个apply从新绑定this，不绑定的话treeSearch函数this指向的是window(直接使用下面的func()就行),
                    // func()//外部传入的函数 
                    isImmediate = true//使函数下次不会立即执行使其延迟
                }, wait)//延迟执行时间
            }
        }
    }


    // 二. 监听中文输入
    $('#search').on('input propertychange', function () {//input propertychange 当输入框里的值有变化时执行此函数  
        if ($(this).prop('cnStart')) return;//如果正在执行中文输入时，此值为true，执行return=>下面代码不执行  
        console.log('当前输入：' + $(this).val());
        //此处执行AJAX请求判断请求的数据中有没有包含输入的这些字的古诗  
        //如果有，就将所有包含这些字的诗排列出来  
    }).on('compositionstart', function () {//compositionstart 当输入框有非直接的文字输入时触发(如：输入拼音在待选状态时)  
        $(this).prop('cnStart', true);
        console.log('正在中文输入');//将 cnStart 变为 true，此处执行完后会跳到  
    }).on('compositionend', function () {//compositionend 当输入框有直接的文字输入时触发(如：输入拼音后完成了中文选择时)  
        $(this).prop('cnStart', false);
        console.log('完成中文输入');
        console.log('当前输入：' + $(this).val());
    });
</script>

</html>